import React from 'react';
import {
  Text,
  IconButton,
  HStack, Alert, VStack, CloseIcon,
} from 'native-base';

export default function ToastAlert({
  status,
  variant,
  title,
  description,
  onClose,
  onPress = () => {},
}) {
  return (
    <Alert zIndex={1000} borderRadius={10} maxWidth="100%" alignSelf="center" flexDirection="row" status={status || 'info'} variant={variant}>
      <VStack space={1} flexShrink={1} w="100%">
        <HStack flexShrink={1} alignItems="center" justifyContent="space-between">
          <HStack space={2} flexShrink={1} alignItems="center">
            <Alert.Icon />
            <Text onPress={onPress} fontSize="md" fontWeight="medium" flexShrink={1} color="lightText">
              {title}
            </Text>
          </HStack>

          <IconButton
            variant="outline"
            colorScheme={status || 'info'}
            onPress={onClose}
            icon={<CloseIcon size="4" />}
            _icon={{
              color: 'lightText',
            }}
          />
        </HStack>
        <Text onPress={onPress} px="6" color="lightText">
          {description}
        </Text>
      </VStack>
    </Alert>
  );
}
